<template>
	<view class="container">

		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="condition-list">
			<text style="margin-left: -10px; font-weight: bold;">维修方式：</text>
			<view class="condition-way" v-if="current === 0" @click="current0" >
				<!-- <fxy-data-select v-model="value" :localdata="ways" @change="change(value)" placeholder="全部"
					clear=true></fxy-data-select> -->
				<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
			</view>
			<!-- <view class="condition-way" v-if="current === 1" @click="current1">
				<fxy-data-select v-model="value" :localdata="ways" @change="change" placeholder="全部"
					clear=true></fxy-data-select>
			</view> -->
			<view class="condition-way" v-if="current === 1" @click="current1" >
				<!-- <fxy-data-select v-model="value" :localdata="ways" @change="change(value)" placeholder="全部"
					clear=true></fxy-data-select> -->
				<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
			</view>
			<view class="example-bodys">



			</view>
		</view>
		<view class="content" @click="abc">
			<view v-if="current === 0" class="ing" @click="current0">
				<view class="content-top" v-for="(item,index) in this.repairList" :key="index" >
					<view class="content-up">
						<text>维修单号:{{item.id}}</text>
					</view>
					<view class="content-down">
						<view class="content-down-left">
							<text v-if="item.type == '0'">维修方式：到店维修</text>
							<text v-if="item.type == '1'">维修方式：上门取车</text>
							<text>预约日期：{{item.reservationTime}}</text>
						</view>
						<view class="content-down-right">
							<button class="mini-btn" type="primary" size="mini"
								style="border-radius: 20px; background-color: #1564E6; width: 90px;"
								@click="goToDeatiling(item.id)">查看详情</button>
						</view>
					</view>
				</view>
			</view>
			<view v-if="current === 1" class="ing" @click="current1">
				<view class="content-top" v-for="(item,index) in this.repairListOver" :key="index">
					<view class="content-up">
						<text>维修单号:{{item.id}}</text>
					</view>
					<view class="content-down">
						<view class="content-down-left">
							<text v-if="item.type == '0'">维修方式：到店维修</text>
							<text v-if="item.type == '1'">维修方式：上门取车</text>
							<text>预约日期：{{item.reservationTime}}</text>
						</view>
						<view class="content-down-right">
							<button class="mini-btn" type="primary" size="mini"
								style="border-radius: 20px; background-color: #1564E6; width: 90px;"
								@click="goToDeatilFinish(item.id)">查看详情</button>
						</view>
					</view>
				</view>
			</view>

		</view>



	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				items: ['进行中', '已完成'],
				current: 0,
				activeColor: '#007aff',
				styleType: 'button',
				value: 2,
				range: [{
						value: 0,
						text: "到店维修"
					},
					{
						value: 1,
						text: "上门取车"
					}, {
						value: 2,
						text: "全部"
					}
				],
				repairList: [],
				repairListOver: [],
				nowDate: '',
				token: '',
			}
		},
		methods: {
			change(e) {
				console.log("e:", e);
				this.abc()
			},
			abc(){},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				if (this.current == '0') {
					this.current0()
				} else if (this.current == '1') {
					this.current1()
				}
			},
			goToDeatiling(id) {
				uni.navigateTo({
					url: '/pages/my/myRepair/repairDetail/repairDetail?id=' + id
				})
			},
			goToDeatilFinish(id) {
				uni.navigateTo({
					url: '/pages/my/myRepair/repairDetailFinish/repairDetailFinish?id=' + id
				})
			},
			current0() {

				if (this.value == 2) {
					this.value = null
				}
				uni.request({
					url: 'http://localhost/dev-api/merchant/reservation/list',
					method: 'GET',
					header: {
						'Authorization': this.token
					},
					data: {
						uid: 10,
						type: this.value,
						status: 1,
						reservationTime: this.nowDate
					},
					success: (resp) => {
						this.repairList = resp.data.rows
					}
				})
			},
			current1() {
				if (this.value == 2) {
					this.value = null
				}
				uni.request({
					url: 'http://localhost/dev-api/merchant/reservation/list',
					method: 'GET',
					header: {
						'Authorization': this.token
					},
					data: {
						uid: 10,
						type: this.value,
						status: 2,
						reservationTime: this.nowDate
					},
					success: (resp) => {
						this.repairListOver = resp.data.rows
					}
				})
			},
			onLoad(event) {
				const userinfo = uni.getStorageSync("UserInfo")
				console.log('userinfo',userinfo);
				// 获取当前日期
				var date = new Date();

				// 获取当前月份
				var nowMonth = date.getMonth() + 1;

				// 获取当前是几号
				var strDate = date.getDate();

				// 添加分隔符“-”
				var seperator = "-";

				// 对月份进行处理，1-9月在前面添加一个“0”
				if (nowMonth >= 1 && nowMonth <= 9) {
					nowMonth = "0" + nowMonth;
				}

				// 对月份进行处理，1-9号在前面添加一个“0”
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}

				// 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
				var nowDate = date.getFullYear() + seperator + nowMonth + seperator + strDate;
				this.nowDate = nowDate;
				console.log('now date', nowDate);
				const token = uni.getStorageSync('Token');
				this.token = token
				uni.request({
					url: 'http://localhost/dev-api/merchant/reservation/list',
					method: 'GET',
					header: {
						'Authorization':"Bearer " + token
					},
					data: {
						uid: 10,
						type: null,
						status: 1,
						reservationTime: nowDate
					},
					success: (resp) => {
						console.log('resp1', resp)
						this.repairList = resp.data.rows
						console.log('resp', this.repairList)
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.content-top {
		height: 110px;
		background-color: #fff;
		margin: -10px 10px 10; //上，左右，下
		padding: 14px 20px;
		margin-top: 20px;
		border: 1px solid #ccc;
		border-radius: 20rpx;
	}

	.content-up {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2px solid #ccc;
		padding: 8px;
		width: 500rpx;
	}

	.content-up text:nth-child(1) {
		font-size: 16px;
		font-weight: bold;
	}



	.content-down {
		padding-top: 5px;
		/* 使用 Flexbox 布局 */

		/* 垂直居中对齐 */
	}

	.content-down-left {
		display: flex;
		flex-direction: column;
		margin-right: 10px;
	}

	.content-down-left text {
		padding: 5px;
		font-size: 14px;
	}

	.content-down-left text:nth-child(1) {
		padding: 5px;
		font-size: 14px;
		margin-left: -90px;
	}

	.content-down-left text:nth-child(2) {
		margin-left: -12px;
	}

	.content-down-right {
		margin-left: 10px;
	}

	.condition-list {
		display: flex;
		/* 使用 Flexbox 布局 */
		align-items: center;
		/* 垂直居中对齐 */
		flex-wrap: wrap;
		/* 允许换行，如果空间不足时换行 */
		background-color: #fff;
		border-radius: 20px;
		margin: 0 10px;
		height: 50px;
		margin-top: 10px;
		padding: 0 15px;

	}

	.condition-list text {
		color: #3a3a3a;
		font-size: 14px;
	}


	.condition-way {
		width: 80px;
	}

	.condition-way {
		display: flex;
		align-items: center;
		margin-left: 20px;
	}

	.example-bodys {
		display: flex;
		align-items: center;
		margin-left: 100px;
	}

	.condition-way {
		margin-left: -5px;
		//margin-right: 10px;
	}

	.example-bodys {
		margin-right: 0;
	}


	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
	}

	.uni-common-mt {
		margin-top: 30px;
	}

	.uni-padding-wrap {
		//width: 550rpx;
		padding: 0px 30px;
	}

	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}
</style>